<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新增银行卡
      </el-button> -->
    </div>

    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>基本信息</span>

        <el-button
          style="float: right;"
          type="primary"
          size="mini"
          @click="paySet()"
        >添加子卡</el-button>

      </div>
      <div>
        <el-row>
          <el-col :span="8">
            <div class="grid-content ">
              站点名称：{{ oil.company }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              负责人：{{ oil.name }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              手机号：{{ oil.phone }}
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="8">
            <div class="grid-content ">
              <!-- 地址：{{ oil.provinceName + oil.cityName + oil.areaName + oil.address }} -->
              地址：{{ oil.address }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              状态：{{ oil.state | stateFilter }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              类型：{{ oil.type | typeFilter }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content "/>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card
      class="box-card"
      style="margin-top:20px"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>子卡信息</span>
      </div>
      <div>
        <el-table
          :key="key"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <!-- <el-table-column
        prop="author"
        label="序号"
        align="center"
        width="80"
        value="scope.$index + 1"
      /> -->
          <el-table-column
            prop="cardNum"
            label="子卡卡号"
            align="center"
            width=""
          />
  <!--        <el-table-column
            label="子卡数量"
            min-width=""
            align="center"
          >
            <template slot-scope="scope">
              <span @click="mainCard(scope.row)"> {{ scope.row.num }}</span>

            </template>
          </el-table-column>-->
          <el-table-column
            label="类型"
            width=""
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.sourceId | typeFilter1 }}
            </template>
          </el-table-column>

          <el-table-column
            label="累计充值金额"
            min-width=""
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row. money }}
            </template>
          </el-table-column>

          <el-table-column
            prop="created"
            label="绑定时间"
            align="center"
            width=""
          />

          <el-table-column
            label="操作"
            align="center"
            width="170px"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleUpdate(scope.row)"
              >充值</el-button>

              <el-button
                type="danger"
                size="mini"
                style="width:70px"
                @click="unBind(scope.row)"
              >解除绑定</el-button>

            </template>
          </el-table-column>

        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />

    </el-card>
    <el-dialog
      title="添加子卡"
      :visible.sync="dialogPay"
      top="10vh"
    >
       <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="110px"
        style="width:550px; margin-left:50px;"
      >

        <el-form-item
          label="主卡"
          prop="parentId"
        >

          <el-select
            v-model="temp.parentId"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择主卡"
            style="width:440px"
            @change="choseCard"
          >
            <el-option
              v-for="item in mainCardList"
              :label="item.cardNum"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="子卡"
          prop="cardId"
        >

          <el-select
            v-model="temp.cardId"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择子卡"
            style="width:440px"
          >
            <el-option
              v-for="item in childCardList"
              :label="item.cardNum"
              :value="item.id"
            />
          </el-select>
        </el-form-item>


      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogPay = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="editPayDo"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

     <el-dialog
      title="充值"
      :visible.sync="dialogFormMoney"
      top="10vh"
    >
       <el-form
        ref="temp1"
        :rules="rules"
        :model="temp1"
        label-position="left"
        label-width="110px"
        style="width:550px; margin-left:50px;"
      >

         <el-form-item
          label="充值金额"
          prop="money"
        >

          <el-input
            v-model="temp1.money "

          />

        </el-form-item>

          <!--<el-form-item-->
          <!--label="实付金额"-->
          <!--prop="buyMoney"-->
        <!--&gt;-->

          <!--<el-input-->
            <!--v-model="temp1.buyMoney"-->

          <!--/>-->

        <!--</el-form-item>-->


      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogPay = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="giveMoney"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  tradesList,
  oilDeatil,
  getCode,
  editPay,
  getMainCardList,
  getOilCardAll,
  mainCardList,
  oilCardBind,
  oilCardUnBind,
  cardHighCardRech
} from "@/api/v1";
import { resetPassword, cooperationUnBind } from "@/api/user";
import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { parseTime } from "@/utils";
import { MessageBox, Message } from "element-ui";
import { Loading } from "element-ui";

export default {
  directives: { waves },
  components: { Pagination },
  filters: {
   typeFilter1(role) {    //是否高挂 1是   2否
      switch (role) {
        case 1:
          return "中石油";
        case 2:
          return "中石化";
      }
    },
    typeFilter(role) {    //是否高挂 1是   2否
     switch (role) {
        case 1:
          return "加油站";
        case 2:
          return "加气站";
      }
    },
    stateFilter(status) {
      switch (status) {
        case 0:
          return "开启";
        case 1:
          return "关闭";
      }
    }
  },
  data() {
    return {
      dialogCode: false,
      dialogPay: false,
      imageUrl: "",
      oil: {},
      tableData: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      mainCardList:[],
      childCardList:[],
      listQuery: {
        page: 1,
        limit: 20,
        sort: "+id"
      },
      key: 1, // table key
      dialogFormVisible: false,
      dialogFormMoney: false,
      rules: {
        cardId: [{ required: true, message: "请输入子卡", trigger: "change" }],
        parentId: [{ required: true, message: "请输主卡", trigger: "change" }],
        idCardNum: [
          { required: true, message: "请输入身份证号码", trigger: "blur" }
        ],
        // currentMoney: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        money: [{ required: true, message: "请输入金额", trigger: "blur" }],
//        buyMoney: [{ required: true, message: "请输入金额", trigger: "blur" }],

        payPassword: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增"
      },
      temp: {
        cardNum: "",
        openName: "",
        idCardNum: "",
        relationId: "", // 省代或油卡商户id–超管添加必传
        relationType: "" // 类型1为省代，2为油卡商户–超管添加必传
      },
      temp1: {
        cardId : "",
        buyMoney : "",
        money: ""
      },
      pay: {
        id: "",
        payType: "",
        jdMrchNo: "",
        pfMrchNo: ""
      }
    };
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },

  created() {
    const id = this.$route.query.relationId;

    this.temp.cooId=id;

    this.listQuery.cooId = id;
    this.pay.id = id;
    console.log(id);
    const data = {
      id: id
    };
    this.oilDeatil(data);
    this.getList();
    this.mainCardList1();
  },
  methods: {
      mainCardList1() {
      var data = {
        type: 1,
        isHang:1,
      };
      getOilCardAll(data).then(res => {
        this.mainCardList = res.data;
      });
    },
     choseCard(e) {
      console.log(e);
      const data = {
        parentId: e,
        type: 2,
        isHang:1,
      };
      getOilCardAll(data).then(res => {
        this.childCardList = res.data;
      });
    },
    oilDeatil(data) {
      oilDeatil(data).then(res => {
        this.oil = res.data;
        console.log(this.tableData);
      });
    },
    editPayDo() {
      console.log(this.temp);

      this.$refs["temp"].validate(valid => {
        if (valid) {
          oilCardBind(this.temp).then(() => {
            this.dialogPay = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            this.getList(this.oil);
          });
        }
      });
    },

    paySet() {
      this.pay = this.oil;
      this.dialogPay = true;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },

    unBind(row) {

      this.$prompt('请输入卡内余额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          const data={
            money:value,
            cooId:this.$route.query.relationId,
            cardId:row.id
          }
          oilCardUnBind(data).then(res => {
            console.log(res);
            this.$notify({
              title: "消息",
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.getList();
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消输入'
          // });
        });


    },
    handleUpdate(row){
      this.resetTemp1();
      this.dialogFormMoney= true;
      this.$nextTick(() => {
        this.$refs["temp1"].clearValidate();
      });
      console.log(row)
      this.temp1.cardId=row.id

    },
    giveMoney(){

         this.$refs["temp1"].validate(valid => {
        if (valid) {
          cardHighCardRech(this.temp1).then(res => {
            // this.list.unshift(this.temp);
            this.dialogFormMoney= false;

            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.getList();
          });
        }
      });


    },
    resetTemp() {
      this.temp.cardNum = "";
      this.temp.openName = "";
      this.temp.idCardNum = "";
    },
      resetTemp1() {
      this.temp1.money  = "";
      this.temp1.buyMoney  = "";
      this.temp1.cardId  = "";
    },
    handleCreate() {
      this.resetTemp();
      console.log(this.temp);
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },
    getCode() {
      var query = { phone: this.phone };
      getPhoneCode(query).then(res => {
        Message({
          message: res.msg || "success",
          type: "success",
          duration: 2 * 1000
        });
      });
    },

    getList() {
      this.listLoading = true;
      this.listQuery.type = 2; //2为子卡
      this.listQuery.cooId = this.$route.query.relationId;
      this.listQuery.isHang = 1;
      getMainCardList(this.listQuery).then(res => {
        this.tableData = res.data.records;
        this.total = Number(res.data.total);
        console.log(this.tableData);
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    createData() {
      this.$refs["temp"].validate(valid => {
        if (valid) {
          console.log(this.temp);
          oilCardBind(this.temp).then(res => {
            // this.list.unshift(this.temp);
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.getList();
          });
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>

